<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: pink;
        /*调用动画*/
        animation-name: move;
        /*动画实现时间*/
        animation-duration: 2s;
        /*状态分配会时间*/
        /* 实现动画循环 */
        animation-iteration-count: infinite;
        /* 逆向播放动画 */
        animation-direction: alternate;
        /*动画结束后的状态*/
        /* animation-fill-mode: ; */
        /* 动画简写 */


    }

    /*定义动画*/
    @keyframes move {

        /*开始状态*/
        /* 0% {
            transform: translate(0px);
        }

        50% {
            transform: translate(500px);
        }

        /*结束状态*/
        /* 100% {
            transform: translate(0px);
        } */
        /*开始状态*/
        from {
            transform: translate(0px);
        }

        /*结束状态*/
        to {
            transform: translate(500px);
        }
    }
</style>

<body>
    <div class="box1"></div>
    <script>
        //先定义动画再使用
        //1. 使用keyframes 定义动画
        //2. 使用动画
        //3. from 相对于0% ，to 相当于100%
        //4. 动画常见属性:
        // @keyframes(绑定动画)
        // animation-iteration-count: infinite; 动画无线循环
        //动画简写
        // animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画开始或结束状态
    </script>
</body>

</html>